<template>
  <div class="salon_diagnose_4">
    <div class="diagnose_4_table">
      <table border="0" cellpadding="8">
        <tr>
          <th>客户池总量</th>
          <td colspan="4">
            <div class="info_div" style="width: 180px">{{ stockVo.clerkTotal }}</div>
          </td>
        </tr>
        <tr>
          <th>客群年龄(%)</th>
          <td>
            <span class="in_td_title">20-30岁</span>
            <div class="info_div" style="width: 87px">{{ stockVo.clerkAgePct20 }}</div>
          </td>
          <td>
            <span class="in_td_title">30-40岁</span>
            <div class="info_div" style="width: 87px">{{ stockVo.clerkAgePct30 }}</div>
          </td>
          <td>
            <span class="in_td_title">40-50岁</span>
            <div class="info_div" style="width: 87px">{{ stockVo.clerkAgePct40 }}</div>
          </td>
          <td>
            <span class="in_td_title">50岁以上</span>
            <div class="info_div" style="width: 87px">{{ stockVo.clerkAgePct50 }}</div>
          </td>
        </tr>
        <tr>
          <th>活跃（直客）总量</th>
          <td>
            <span class="in_td_title">S客</span>
            <div class="info_div" style="width: 102px">{{ stockVo.clerkActPctS }}</div>
          </td>
          <td>
            <span class="in_td_title">A客</span>
            <div class="info_div" style="width: 102px">{{ stockVo.clerkActPctA }}</div>
          </td>
          <td>
            <span class="in_td_title">B客</span>
            <div class="info_div" style="width: 102px">{{ stockVo.clerkActPctB }}</div>
          </td>
          <td>
            <span class="in_td_title">C客</span>
            <div class="info_div" style="width: 102px">{{ stockVo.clerkActPctC }}</div>
          </td>
        </tr>
        <tr>
          <th>活跃（渠道客）总量</th>
          <td>
            <span class="in_td_title">S客</span>
            <div class="info_div" style="width: 102px">{{ stockVo.clerkActPlatPctS }}</div>
          </td>
          <td>
            <span class="in_td_title">A客</span>
            <div class="info_div" style="width: 102px">{{ stockVo.clerkActPlatPctA }}</div>
          </td>
          <td>
            <span class="in_td_title">B客</span>
            <div class="info_div" style="width: 102px">{{ stockVo.clerkActPlatPctB }}</div>
          </td>
          <td>
            <span class="in_td_title">C客</span>
            <div class="info_div" style="width: 102px">{{ stockVo.clerkActPlatPctC }}</div>
          </td>
        </tr>
        <tr>
          <th>近1年最大消费金额</th>
          <td colspan="4">
            <div class="info_div" style="width: 180px">{{ stockVo.volumeOfBusiness }}</div>
          </td>
        </tr>
        <tr>
          <th>运营较长的活客群</th>
          <td>
            <span class="in_td_title">平均数量</span>
            <div class="info_div" style="width: 102px">{{ stockVo.clerkActLongSumNum }}</div>
          </td>
          <td>
            <span class="in_td_title">平均时长(天)</span>
            <div class="info_div" style="width: 87px">{{ stockVo.clerkActLongAvgDay }}</div>
          </td>
          <td colspan="2">
            <span class="in_td_title">平均客单价</span>
            <div class="info_div" style="width: 180px">{{ stockVo.clerkActLongAvgDeal }}</div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { getStockDiagnoseByNo } from '@/api/diagnose';
// 引入自定义组件
import '@/utils/datefmt';
// 引入第三方组件
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

export default {
  name: 'Diagnose4',
  data() {
    return {
      salon: {},
      stockVoDefault: {
        // stockVo 的各项默认值
        clerkTotal: 0,
        clerkAgePct20: 0,
        clerkAgePct30: 0,
        clerkAgePct40: 0,
        clerkAgePct50: 0,
        clerkActPctS: 0,
        clerkActPctA: 0,
        clerkActPctB: 0,
        clerkActPctC: 0,
        clerkActPlatPctS: 0,
        clerkActPlatPctA: 0,
        clerkActPlatPctB: 0,
        clerkActPlatPctC: 0,
        volumeOfBusiness: 0,
        clerkActLongSumNum: 0,
        clerkActLongAvgDay: 0,
        clerkActLongAvgDeal: 0,
      },
      stockVo: {}, // 老客(存量客户)复盘信息
      tagsPct: {}, // 顾客标签占比
      isFetching: false, // 通用的&互斥的, 加载后端数据
      isUpdating: false,
      searchTag: {
        allClerk: true,
        minDate: undefined, // 最早注册时间
      },
    };
  },
  computed: {
    ...mapGetters(['deptId', 'openId', 'id', 'name']),
  },
  methods: {
    tagDisabledDate(date) {
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      const oneYearBefore = new Date(today);
      oneYearBefore.setFullYear(today.getFullYear() - 1);
      return !(date - oneYearBefore >= 0 && date - today < 0);
    },
    loadDiagnoseData: async function (salon /* {salonId: '', salonNo: '', salonName: '', diagnoseNo: ''} */) {
      if (!salon || !salon.diagnoseNo) {
        return;
      }
      this.salon = Object.assign({}, salon);
      await this.loadDiagnose4();
      await this.loadTagsPct();
    },
    loadDiagnose4: async function () {
      if (this.isFetching) {
        return;
      }
      this.isFetching = true;
      const errAlertMsg = '查询老客复盘信息失败';
      await getStockDiagnoseByNo(this.salon.diagnoseNo)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            this.stockVo = Object.assign({}, ret);
          } else {
            this.stockVo = Object.assign({}, this.stockVoDefault);
          }
        })
        .catch(err => {
          console.log('getStockDiagnoseByNo', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.isFetching = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/salonmodel.scss';

.salon_diagnose_4 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 40px;

  .diagnose_4_table {
    width: 65%;
    display: block;

    .info_div {
      @extend .salon_model_info_div;
    }
  }

  .diagnose_4_table th {
    text-align: right;
    font-weight: 500;
    border-bottom: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
  }
  .diagnose_4_table td {
    text-align: left;
    border-bottom: 1px solid #ebeef5;
  }

  .diagnose_4_table td .in_td_title {
    margin: 0 5px 0 0;
  }
}
</style>
